<script lang="ts">
import { defineComponent, ref } from "vue";

import PopupCenter from "./center.vue";

export default defineComponent({
  components: { PopupCenter },
  props: {
    zIndex: { type: Number, default: 98 },
  },
  setup() {
    let confirmCallback: (() => void) | undefined;
    let cancelCallback: (() => void) | undefined;

    const visible = ref(false);
    const width = ref("");
    const translateY = ref("");

    const title = ref("");
    const content = ref("");
    const showTitle = ref(false);
    const showCancel = ref(false);
    const cancelText = ref("");
    const confirmText = ref("");

    const cancelClcik = () => {
      visible.value = false;
      cancelCallback?.();
    };
    const confirmClcik = () => {
      visible.value = false;
      confirmCallback?.();
    };

    const show = (
      option: {
        title?: string;
        content?: string;
        showTitle?: boolean;
        showCancel?: boolean;
        cancelText?: string;
        confirmText?: string;
        width?: string;
        translateY?: string;
      },
      confirm?: () => void,
      cancel?: () => void
    ) => {
      title.value = option.title || "提示";
      content.value = option.content || "";
      showTitle.value =
        "showTitle" in option ? (option.showTitle as boolean) : true;
      showCancel.value =
        "showCancel" in option ? (option.showCancel as boolean) : true;
      cancelText.value = option.cancelText || "取消";
      confirmText.value = option.confirmText || "确定";
      width.value = option.width || "76vw";
      translateY.value = option.translateY || "-65%";
      visible.value = true;
      confirmCallback = confirm;
      cancelCallback = cancel;
    };
    return {
      visible,
      width,
      translateY,
      title,
      content,
      showTitle,
      showCancel,
      cancelText,
      confirmText,
      cancelClcik,
      confirmClcik,
      show,
    };
  },
});
</script>

<template>
  <PopupCenter
    :modelValue="visible"
    :showClose="false"
    :zIndex="zIndex"
    :translateY="translateY"
  >
    <view class="popup-modal" :style="{ width }">
      <view class="popup-modal-title" v-if="showTitle">{{ title }}</view>
      <view class="popup-modal-content">
        <view class="popup-modal-text" v-if="content">{{ content }}</view>
        <slot v-else />
      </view>
      <view style="display: flex; justify-content: center">
        <view class="popup-modal-cancel" v-if="showCancel" @click="cancelClcik">
          {{ cancelText }}
        </view>
        <view class="popup-modal-confirm" @click="confirmClcik">
          {{ confirmText }}
        </view>
      </view>
    </view>
  </PopupCenter>
</template>

<style lang="scss">
.popup-modal {
  position: relative;
  padding: 40rpx 30rpx;
  box-sizing: border-box;

  .popup-modal-title {
    padding-top: 20rpx;
    margin: 0 40rpx 20rpx;
    font-size: 36rpx;
    color: #333333;
    line-height: 50rpx;
    text-align: center;
    font-weight: bold;
    white-space: pre-line;
  }

  .popup-modal-content {
    font-size: 30rpx;
    color: #666666;
    line-height: 46rpx;
    white-space: pre-line;
  }

  .popup-modal-text {
    padding-left: 40rpx;
    padding-right: 40rpx;
    padding-bottom: 60rpx;
    text-align: center;
  }

  .popup-modal-cancel,
  .popup-modal-confirm {
    flex-grow: 1;
    width: 50%;
    max-width: 264rpx;
    margin-right: 20rpx;
    font-size: 30rpx;
    color: #fa6731;
    line-height: 84rpx;
    text-align: center;
    font-weight: bold;
    border-radius: 44rpx;
    background-color: rgba(250, 103, 49, 0.1);
  }

  .popup-modal-confirm {
    margin-right: 0;
    color: #ffffff;
    background-color: #fa6731;
  }
}
</style>